<template>
  <div class="header">
    <el-avatar :size="36" :src="store.user.avatar" />
    <el-dropdown>
      <span class="el-dropdown-link">
        {{store.user.username}}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <div @click="logout">退出登录</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/store'
import { User } from '@/custom-types'

type Props = {
  user?: User
}
withDefaults(defineProps<Props>(), {
  user: () => (
    {
      avatar: 'http://mini-cloud.top/upload/default-avatar.png',
      username: '用户名'
    }
  )
})

const store = useUserStore()
const logout = () => {
  store.logout()
  location.href = '/login'
}
</script>

<style lang="scss" scoped>
.header{
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .el-avatar{
    margin-right: 10px;
  }
}
</style>